<template>
  <div id="vmcentercontainer">
    <div class="bg1"></div>
    <div class="bg2"></div>
    <div class="bg3"></div>

    <div class="btn">
      <button>累计确诊</button>
      <button>现存确诊</button>
    </div>

    <div class="worldmap"></div>


  </div>
</template>
<script setup>
// import * as echarts from 'echarts'
// import '../../commonfun/world'
// import {dataMap} from "../../commonfun/dataMap.js"; //地图用数据
// import {nameMap} from "../../commonfun/nameMap.js"; //中英文转换文件

// onMounted(() => {
//   myChart1()
//     var myChart1 = echarts.init(document.querySelector('.worldmap'))
//     myChart1.setOption({
    

//     })
  
//   window.addEventListener(
//     'resize',
//     function () {
//       myChart1.resize()
//     },
//     false
//   )
// })


</script>

<style scoped>
#vmcentercontainer {
  position: relative;
  height: 810px;
  overflow: hidden; /* 下面的图片太大,一直旋转带来了宽度撑高 */
}
.bg1 {
  height: 518px;
  width: 518px;
  background: url(../../assets/image/map.png);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-size: 100% 100%;
  opacity: 0.3;
}

.bg2 {
  height: 643px;
  width: 643px;
  background: url(../../assets/image/lbx.png);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-size: 100% 100%;
  opacity: 0.6;
  animation: rotate1 15s linear infinite;
}
.bg3 {
  height: 566px;
  width: 566px;
  background: url(../../assets/image/jt.png);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-size: 100% 100%;
  opacity: 0.8;
  animation: rotate2 15s linear infinite;
}
.btn {
  width: 810px;
  position: absolute;
  top: 40px;
  display: flex;
  justify-content: space-around;
}
.btn button {
  height: 60px;
  width: 200px;
  font-size: 25px;
  z-index: 10;
  border-radius: 30px;
  background-color: #62b6ff3d;
  border: none;
  color: white;
  cursor: pointer;
}
.btn .click {
  color: #ffe14d;
}

.btn button:focus {
  outline: none;
}

.worldmap {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  height: 810px;
  width: 100%;
}
/* 围绕圆心旋转-从0-360度 */
@keyframes rotate1 {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes rotate2 {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
</style>
